@let instanceUrl = instanceUrl$ | async;
@let activeEnvironment = activeEnvironment$ | async;

@if (activeEnvironment) {
  <div class="d-flex flex-column h-100 p-2" [formGroup]="activeEnvironmentForm">
    <div class="input-group align-items-center">
      <label for="env-settings-name" class="pe-2">Name</label>
      <div class="col-4">
        <input
          type="text"
          class="form-control"
          formControlName="name"
          id="env-settings-name"
        />
      </div>
    </div>

    <app-title-separator
      [heading]="isWeb ? 'API prefix' : 'API URL'"
      icon="power"
      subheading="API available on {{
        instanceUrl +
          (activeEnvironment.endpointPrefix
            ? '/' + activeEnvironment.endpointPrefix
            : '')
      }}"
    ></app-title-separator>

    <div class="input-group align-items-center">
      @if (!isWeb) {
        <div class="col-1">
          <input
            type="text"
            class="form-control"
            id="env-settings-hostname"
            placeholder="localhost"
            formControlName="hostname"
          />
        </div>
        <div class="input-group-text">
          <span class="font-bold">:</span>
        </div>
        <div class="col-1">
          <input
            type="number"
            class="form-control"
            id="env-settings-port"
            placeholder="port"
            formControlName="port"
            [appInputNumber]="{
              min: 0,
              max: 65535,
              canBeEmpty: false
            }"
          />
        </div>
      }
      <div class="input-group-text">
        <span class="font-bold">/</span>
      </div>
      <div class="col-4">
        <input
          type="text"
          class="form-control"
          placeholder="prefix"
          appValidPath
          formControlName="endpointPrefix"
        />
      </div>
      @if (!isWeb) {
        <div class="input-group-text">
          <app-svg
            icon="info"
            ngbTooltip="Default hostname is :: (IPv6) and 0.0.0.0 (IPv4)"
          ></app-svg>
        </div>
      }
    </div>

    @if (!isWeb) {
      <app-title-separator
        heading="TLS"
        icon="lock"
        subheading="TLS uses a self-signed certificate by default"
      ></app-title-separator>

      <ng-container formGroupName="tlsOptions">
        <div class="input-group align-items-center">
          <div class="form-check">
            <input
              type="checkbox"
              class="form-check-input"
              id="env-settings-tls-enabled"
              formControlName="enabled"
            />
            <label class="form-check-label" for="env-settings-tls-enabled"
              >Enable TLS
            </label>
          </div>
        </div>

        <div class="mb-2 d-flex justify-content-center">
          <app-toggle
            class="me-3"
            prefix="cert-types"
            formControlName="type"
            [items]="certTypes"
            [uncheckable]="false"
          ></app-toggle>
        </div>

        <div
          class="input-group align-items-center mb-2"
          id="tls-cert-container"
        >
          @if (
            activeEnvironmentForm.get(['tlsOptions', 'type']).value === 'PFX'
          ) {
            <label for="env-settings-tls-pfxPath" class="pe-2"
              >PFX or PKCS12 path</label
            >
            <div class="col-4">
              <input
                type="text"
                class="form-control"
                formControlName="pfxPath"
                id="env-settings-tls-pfxPath"
              />
            </div>
            <button
              class="btn btn-link"
              ngbTooltip="Browse files"
              (click)="browseFiles('pfxPath')"
            >
              <app-svg icon="find_in_page"></app-svg>
            </button>
          }
          @if (
            activeEnvironmentForm.get(['tlsOptions', 'type']).value === 'CERT'
          ) {
            <label for="env-settings-tls-certPath" class="pe-2 col-1"
              >Cert path</label
            >
            <input
              type="text"
              class="form-control"
              formControlName="certPath"
              id="env-settings-tls-certPath"
            />
            <button
              class="btn btn-link"
              ngbTooltip="Browse files"
              (click)="browseFiles('certPath')"
            >
              <app-svg icon="find_in_page"></app-svg>
            </button>
            <label for="env-settings-tls-keyPath" class="pe-2">Key path</label>
            <input
              type="text"
              class="form-control"
              formControlName="keyPath"
              id="env-settings-tls-keyPath"
            />
            <button
              class="btn btn-link"
              ngbTooltip="Browse files"
              (click)="browseFiles('keyPath')"
            >
              <app-svg icon="find_in_page"></app-svg>
            </button>
          }
        </div>

        <div class="input-group align-items-center">
          <label for="env-settings-tls-caPath" class="pe-2 col-1"
            >CA cert path</label
          >
          <input
            type="text"
            class="form-control"
            formControlName="caPath"
            id="env-settings-tls-caPath"
          />
          <button
            class="btn btn-link"
            ngbTooltip="Browse files"
            (click)="browseFiles('caPath')"
          >
            <app-svg icon="find_in_page"></app-svg>
          </button>
          <label for="env-settings-tls-passphrase" class="pe-2"
            >Cert passphrase</label
          >
          <input
            type="text"
            class="form-control"
            formControlName="passphrase"
            id="env-settings-tls-passphrase"
          />
        </div>
      </ng-container>
    }
    <app-title-separator heading="Misc" icon="storage"></app-title-separator>

    <div class="input-group mb-3 align-items-center">
      <label for="env-settings-latency" class="col-form-label pe-2">
        Latency (ms)
      </label>
      <div class="col-1">
        <input
          type="number"
          id="env-settings-latency"
          class="form-control"
          formControlName="latency"
          [appInputNumber]="{
            min: 0,
            max: Infinity,
            canBeEmpty: false
          }"
        />
      </div>
      <div class="input-group-text">
        <app-svg
          icon="info"
          ngbTooltip="Global environment latency applied to all routes"
        ></app-svg>
      </div>
    </div>

    <div class="input-group align-items-center">
      <div class="form-check">
        <input
          type="checkbox"
          class="form-check-input"
          id="env-settings-cors"
          formControlName="cors"
        />
        <label class="form-check-label" for="env-settings-cors"
          >Automatically handle OPTIONS pre-flight requests
        </label>
      </div>
      <div class="input-group-text">
        <app-svg
          icon="info"
          ngbTooltip="Mockoon will now automatically answer with a 200 HTTP status code to
      all preflight OPTIONS requests"
        ></app-svg>
      </div>
    </div>
  </div>
}
